<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/ProductProcess.jsx或ProductProcess.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
        :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
        :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
        :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
        :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
    </view-grid>
</template>
<script setup lang="jsx">
import extend from "@/extension/mes/mes/ProductProcess.jsx";
import viewOptions from './ProductProcess/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    gridRef.pagination.sortName = "ProductProcessId";  //设置排序字段,多个字段排序用逗号隔开,如:a,b,c
    gridRef.pagination.order = "asc"; //排序方式desc或者asc
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    initDeviceSelectTable()
    initGroupSelectTable()
    
    columns.forEach(x => {
        //开启表头过滤
        x.filterData = true;
    })
}
const initDeviceSelectTable = async () => {
    //配置编辑表单下拉框table搜索选项
    const item = gridRef.getFormOption('DeviceName')
    item.type = 'selectTable'
    //设置只读是否
    //item.readonly = false;
    //配置请求的接口地址
    //可以使用生成的页面接口
    // 注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
    //item.url = 'api/Demo_Customer/getPageData';

    //尽量自定义接口，见下面的文档描述，或者Demo_CustomerController类的方法Search
    item.url = 'api/Device/search'
    // item.inputReadonly=true;输入框只读操作
    // 需要将columns的search字段设置为true，否则无法过滤数据
    //设置显示的字段
    item.columns = [
        //设置search:true,则字段可以搜索
        { field: 'DeviceId', title: 'DeviceId', type: 'int', width: 110, hidden: true },
        //设置search:true,则字段可以搜索
        { field: 'Name', title: '设备名称', type: 'string', width: 80, search: false },
        { field: 'Code', title: '设备编码', type: 'string', width: 110, search: false }

    ]

    //选中table数据后，回写到表单
    item.onSelect = (rows) => {
        gridRef.editFormFields.DeviceId = rows[0].DeviceId;
        gridRef.editFormFields.DeviceName = rows[0].Name;
    };

    //设置过滤条件
    //(输入框搜索)表格数据加载前处理
    item.loadBefore = (param, callback) => {
        //loadType=1按回车调用的查询，loadType=1输入框变化调用的查询，loadType=undefined默认页面加载
        //这里可以实现只加载回车事件
        // if(param.loadType!=1){
        //     return false;
        // }

        //(上面如果设置了item.inputReaonly，这里就不能添加表单的值过滤，否则无法显示数据)
        //方式1、手动设置查询条件
        // param.wheres.push({
        //       name:"Customer",
        //       value:this.editFormFields.Customer,
        //       displayType:"like"
        // })
        //方式2、给param.value设置值，后台手动处理查询条件
        //上面设置inputReadonly=true时，这里不用设置值
        param.value = gridRef.editFormFields.DeviceName
        callback(true)
    }

    /****************下面这些配置不是必须的**************/
    //表格数据加载后处理
    item.loadAfter = (rows, callback, result) => {
        callback(true)
    }
    //监听输入框变动与回车事件
    item.onKeyPress = (val, $event) => {
        console.log(val)
        if ($event.keyCode == 13) {
            console.log('按了回车')
        }
        //清空值时给其他字段设置值
        // if(!val&&value+''!='0'){
        //    this.editFormFields.字段=null;
        // }
    }
    //设置弹出框高度(默认200)
    item.height = 200
    //设置弹出框宽度(默认500)
    //item.width = 400;
    //item.textInline = false; //设置表格超出自动换行显示
    //设置表格是否单选
    item.single = true
    //隐藏分页
    item.paginationHide = false

}
const initGroupSelectTable = async () => {
    //配置编辑表单下拉框table搜索选项
    const item = gridRef.getFormOption('GroupName')
    item.type = 'selectTable'
    //设置只读是否
    //item.readonly = false;
    //配置请求的接口地址
    //可以使用生成的页面接口
    // 注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
    //item.url = 'api/Demo_Customer/getPageData';

    //尽量自定义接口，见下面的文档描述，或者Demo_CustomerController类的方法Search
    item.url = 'api/ProductionGroup/search'
    // item.inputReadonly=true;输入框只读操作
    // 需要将columns的search字段设置为true，否则无法过滤数据
    //设置显示的字段
    item.columns = [
        //设置search:true,则字段可以搜索
        { field: 'ProductionGroupId', title: 'ProductionGroupId', type: 'int', width: 110, hidden: true },
        //设置search:true,则字段可以搜索
        { field: 'Name', title: '设备名称', type: 'string', width: 80, search: false },
        { field: 'Code', title: '设备编码', type: 'string', width: 110, search: false }

    ]

    //选中table数据后，回写到表单
    item.onSelect = (rows) => {
        gridRef.editFormFields.GroupId = rows[0].ProductionGroupId;
        gridRef.editFormFields.GroupName = rows[0].Name;
    };

    //设置过滤条件
    //(输入框搜索)表格数据加载前处理
    item.loadBefore = (param, callback) => {

        param.value = gridRef.editFormFields.GroupName
        callback(true)
    }

    /****************下面这些配置不是必须的**************/
    //表格数据加载后处理
    item.loadAfter = (rows, callback, result) => {
        callback(true)
    }
    //监听输入框变动与回车事件
    item.onKeyPress = (val, $event) => {
        console.log(val)
        if ($event.keyCode == 13) {
            console.log('按了回车')
        }
        //清空值时给其他字段设置值
        // if(!val&&value+''!='0'){
        //    this.editFormFields.字段=null;
        // }
    }
    //设置弹出框高度(默认200)
    item.height = 200
    //设置弹出框宽度(默认500)
    //item.width = 400;
    //item.textInline = false; //设置表格超出自动换行显示
    //设置表格是否单选
    item.single = true
    //隐藏分页
    item.paginationHide = false

}

const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    grid.value.clearSelection();
    //点击行默认选中
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
    if (gridRef.currentAction == 'Add') {
        gridRef.editFormFields.IsEnabled = 1;
        gridRef.editFormFields.ProcessTypeId = 1;
        gridRef.editFormFields.PriceTypeId = 1;
        gridRef.editFormFields.WorkHourPrice = 0;
        gridRef.editFormFields.WorkQtyPrice = 0;
        gridRef.editFormFields.IsChecked = 0;
    }
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
